<template>
  <div id="app">
    <div style="width: 300px; margin: 100px auto">
      <el-upload
        :http-request="httpRequest"
        action
        multiple
        :on-change="handleChange"
        @submit.prevent="()=>{console.log(444)}"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <div>
      <form action="javascript:;">
        <input type="file" @change="handleChange2" name="file" multiple>
        <button @click="httpRequest2">上传</button>
      </form>
    </div>
    <br>
    <hr>
    <div>
      <form action="http://192.168.1.173:8888/upload3" enctype="multipart/form-data" method="POST">
        <input type="file"  name="file" multiple>
        <input type="submit" value="form上传"/>
      </form>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import md5 from 'js-md5';
import axios from 'axios';
export default {
  name: 'App',
  data() {
    return {
      fileList: []
    }
  },
  mounted() {
  },
  methods: {
    upload(file) {
      if(file) {
        // 单次大小
        let size = 1024 * 1024 * 50;
        //总传输次数
        let times = Math.ceil(file.size / size);
        let i = 0;
        function fn() {
          if(i >= times) return;
          let start = i * size;
          let end = (i+1) * size;
          let formData = new FormData();
          let slice = file.slice(start, end);
          formData.append('file', slice);
          formData.append('fileName', file.name);
          formData.append('currentSlice', i);
          formData.append('sliceMd5', '');
          formData.append('originMd5', '');
          formData.append('length', file.size);
          formData.append('totalSlice', times-1);
          let url = 'http://192.168.1.173:8888/upload';
          // let url = 'http://localhost:8888/upload';
          let headers = {'Content-Type':'multipart/form-data'};
          axios.post(url, formData, headers)
          .then(res => {
            setTimeout(() => {
              i = i+1;
              fn();
            });
          });
        }
        fn();
      } else {
        console.log('请选择文件');
      }
    },
    handleChange2(e) {
      let list = e.target.files;
      for(let i=0; i<list.length; i++) {
        this.upload(list[i]);
      }
    },
    httpRequest2(e) {
      // let file = e.target.files;
      console.log(e.target.files);
    },
    handleChange(e, fileList) {
      this.fileList = fileList;
    },
    httpRequest(e) {
      let file = e.file;
      this.upload(file);
    }
  }
}
</script>

<style>
</style>
